<template>
	<view class="container">
		<!-- 提现页面的顶部提示区域 -->
		<view class="whithdrawInfo">
			<view class="titleText">
				提现类型
			</view>
			<view class="authStatus">
				<!-- 账户状态 -->
				<view class="authType">
					{{accountText}}
				</view>

				<!-- 操作信息 -->
				<view class="authOperate" @click="toCertify()">
					<view class="text">
						{{certifyText}}
					</view>
					<view class="icon">

					</view>
				</view>
			</view>

			<!-- 账户信息 -->
			<view class="accountDetail" v-if="certifyStatus===1">
				<view class="detailItem">
					<view class="key">
						公司名称:
					</view>
					<view class="value">
						{{accountInfo.serverUserAccountInfoCompanyName}}
					</view>
				</view>
				<view class="detailItem">
					<view class="key">
						账户号码:
					</view>
					<view class="value">
						{{accountInfo.serverUserAccountInfoCorporateNumber}}
					</view>
				</view>
				<view class="detailItem">
					<view class="key">
						开户银行:
					</view>
					<view class="value">
						{{accountInfo.serverUserAccountInfoBank}}
					</view>
				</view>

			</view>

			<!-- 反馈的文字信息 -->
			<view class="feedbackText" v-if="certifyStatus===0||certifyStatus===2">
				{{feedbackText}}
			</view>

		</view>


		<!-- 提现面板 -->
		<view class="withdrawCard">
			<view class="cardTitle">
				提现金额
			</view>
			<view class="Fee">
				<view class="front">
					￥
				</view>
				<view class="fee">
					<input type="number" v-model="withdrawValue" @focus="inputEvent()" @blur="verifyCommssion()" />
				</view>
			</view>
			<view class="Balance" v-if="verifyStatus==false">
				<view class="descText">
					可提现佣金金额
				</view>
				<view class="balance">
					￥{{serverKickbackRemainAmount}}
				</view>
			</view>
			<view class="verifyMsg" v-if="verifyStatus==true">
				{{verifyMsg}}
			</view>
			<view class="promptInfo">
				<view class="titleText">
					温馨提示
				</view>
				<view class="detail">
					1.提现手续费1%，具体金额以实际到账为准
				</view>
				<view class="detail">
					2.提现金额不少于100元
				</view>
			</view>
			<!-- 提现按钮 -->
			<view class="withdrawBtn" @click="toWithdraw()">
				提现
			</view>
		</view>

		<!-- 弹出的认证提示框 -->
		<view class="popCard" v-if="isPopUp" @click="toCertify()">
			<view class="title">
				您还未完成佣金提现信息认证
			</view>
			<view class="desc">
				<view class="text">
					认证信息审核通过后
				</view>
				<view class="text">
					即可进行佣金余额提现
				</view>
			</view>

			<view class="toCertifyBtn">
				去认证
			</view>
		</view>

		<!-- 蒙层 -->
		<view @click="closeMask()">
			<popMask :isShow="isPopUp"></popMask>
		</view>


	</view>
</template>

<script>
	import * as commssionApi from '@/api/commssion/commssion.js'
	import popMask from '@/components/popMask.vue'
	let lastRequestTime = 0;
	const requestInterval = 1000; // 设置请求的最小间隔时间，例如1000毫秒
	export default {
		components: {
			popMask,
		},
		data() {
			return {
				// 输入校验提示文本
				verifyMsg: '',
				withdrawValue: 100,
				//提示字体是否显示
				verifyStatus: false,
				//认证状态 服务商账户审核状态，0为待审核，1为审核通过，2为审核不通过
				certifyStatus: 0,
				//认证成功后需要展示的公户账户信息
				accountInfo: {
					serverUserAccountInfoCompanyName: '',
					serverUserAccountInfoCorporateNumber: '',
					serverUserAccountInfoBank: '',
					serverUserAccountInfoRefuseReason: ''
				},
				//从佣金页面传来的佣金余额
				serverKickbackRemainAmount: 0,
				//向后台传递的提现对象

				withdrawVo: {
					serverUserAccountInfoId: null,
					withdrawAmount: null
				},

				// 控制蒙层
				isPopUp: false,





			};
		},
		computed: {
			accountText() {
				if (this.certifyStatus === 0) {
					return '审核中'
				} else if (this.certifyStatus === 1) {
					return '公户'
				} else if (this.certifyStatus === 2) {
					return '未通过'
				} else if (this.certifyStatus === -1) {
					return '未认证'
				}
			},
			certifyText() {
				if (this.certifyStatus === 1) {
					return '重新认证'
				} else {
					return '去认证'
				}
			},
			feedbackText() {
				if (this.certifyStatus === 0) {
					return '1到3个工作日内完成审核'
				} else if (this.certifyStatus === 2) {
					return this.accountInfo.serverUserAccountInfoRefuseReason;
				}
			},
			//去企业认证	，并携带相应参数，判断是首次还是重新认证
			toCertifyType() {
				if (this.certifyStatus === -1) {
					return 1;
				} else {
					return 2;
				}


			}
		},
		onLoad(options) {
			const paramsStr = options.params || null; // 获取URL查询参数中的params字段
			//接收个人中心传来的订单类型
			if (paramsStr != null) {
				const receivedParams = JSON.parse(paramsStr);
				this.serverKickbackRemainAmount = receivedParams.serverKickbackRemainAmount;
			}
			console.log(options)
			this.getCurrentAccountStatus();
		},
		onShow() {
			this.getCurrentAccountStatus();
		},

		methods: {
			//获取当前账户信息和认证状态
			async getCurrentAccountStatus() {
				const res = await commssionApi.getCertifInfo();

				// 账户认证信息
				console.log("账户认证信息")
				console.log(res);

				if (res.data.code === 200 && res.data.data != null) {
					let responseData = res.data.data;
					this.withdrawVo.serverUserAccountInfoId = responseData.serverUserId;
					this.certifyStatus = responseData.serverUserAccountInfoStatus;
					Object.keys(responseData).forEach(key => {
						if (key in this.accountInfo) {
							this.accountInfo[key] = responseData[key];
						}
					});



				} else if (res.data.code === 280) {

					//说明该用户从来没有认证过
					this.certifyStatus = -1;
				} else {
					this.certifyStatus = -1;

				}


			},


			//校验金额输入的规范
			verifyCommssion() {
				console.log(this.withdrawValue)
				if (this.withdrawValue < 100) {
					this.verifyStatus = true;
					this.verifyMsg = '输入金额低于最低提现要求'
					this.withdrawValue = 100
					return;
				} else if (this.withdrawValue > 99999) {
					this.verifyStatus = true;
					this.verifyMsg = '输入金额超过限制'
					this.withdrawValue = 100
					return;
				}


			},
			//重新点击输入框若把this.verifyStatus=false
			inputEvent() {
				this.verifyStatus = false;
			},


			//去企业认证	，并携带相应参数，判断是首次还是重新认证
			toCertify() {
				if (this.certifyStatus === 0) {
					uni.$toPage('/subpkg/ServiceProvider/enterpriseCertifyDetail/enterpriseCertifyDetail')
				} else {
					uni.$toPage('/subpkg/ServiceProvider/enterpriseCertify/enterpriseCertify', {
						toCertifyType: this.toCertifyType
					})
				}


			},

			//调用提现接口
			async toWithdraw() {
				const currentTime = new Date().getTime();
				if (currentTime - lastRequestTime < requestInterval) {
					return uni.$showMsg('操作过于频繁'); // 这将阻止请求继续执行
				}
				lastRequestTime = currentTime; // 更新上一次请求时间
				if (this.certifyStatus != 1) {
					//这里写弹出去企业认证的弹出框
					this.isPopUp = true;
					return;

				} else if (this.withdrawValue > this.serverKickbackRemainAmount) {
					this.verifyStatus = true;
					this.verifyMsg = '可提现佣金不足'
					this.withdrawValue = 100;
					return;
				} else {
					// 这里就调用后台接口
					this.withdrawVo.withdrawAmount = parseFloat(this.withdrawValue).toFixed(2);
					const res = await commssionApi.withdrawServerKickback(this.withdrawVo);
					console.log("提现反馈信息")
					console.log(res)
					if (res.data.code === 200) {
						this.serverKickbackRemainAmount -= this.withdrawVo.withdrawAmount;
						uni.$showMsg('提现成功')
						uni.$toPage('/subpkg/ServiceProvider/withdrawTransferPage/withdrawTransferPage')
					} else if (res.data.code === 201) {
						return uni.$showMsg('佣金不足')
					} else return uni.$showMsg('提现失败，请稍后重试')

				}
			},
			//关闭蒙层
			closeMask() {
				this.isPopUp = false;
			}




		}

	}
</script>

<style lang="scss" scoped>
	.container {
		box-sizing: border-box;
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;

		overflow: hidden;

		// 顶部提现状态和信息区域
		.whithdrawInfo {
			box-sizing: border-box;
			margin-top: 42rpx;
			width: calc(100% - 90rpx);
			display: flex;
			flex-direction: column;

			.titleText {
				box-sizing: border-box;
				font-size: 36rpx;
				font-weight: 500;
				letter-spacing: 0rpx;
				line-height: 52.12rpx;
				color: rgba(0, 0, 0, 1);

			}

			.authStatus {
				display: flex;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.authType {
					font-size: 32rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 46.34rpx;
					color: rgba(0, 0, 0, 1);
				}

				.authOperate {
					display: flex;
					flex-direction: row;
					font-size: 32rpx;
					font-weight: 400;
					align-items: center;
					letter-spacing: 0rpx;
					line-height: 46.34rpx;
					color: rgba(85, 85, 87, 1);


					.text {}

					.icon {
						box-sizing: border-box;
						background: url('/static/my/icon_arrow_chevron-right.png');
						display: flex;
						justify-content: center;
						align-items: center;
						width: 48rpx;
						height: 48rpx;

					}
				}
			}

			.accountDetail {
				margin-top: 10rpx;

				.detailItem {
					display: flex;
					font-size: 24rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 34.76rpx;
					color: rgba(0, 0, 0, 1);

					.key {}

					.value {
						margin-left: 10rpx;

					}
				}
			}

			.feedbackText {
				margin-top: 10rpx;
				font-size: 28rpx;
				font-weight: 300;
				letter-spacing: 0rpx;
				line-height: 40.54rpx;
				color: rgba(85, 85, 87, 1);
			}
		}


		//提现面板
		.withdrawCard {


			padding-left: 30rpx;
			box-sizing: border-box;
			margin-top: 168rpx;
			width: 694rpx;
			height: 1500rpx;
			opacity: 1;
			border-radius: 24rpx 24rpx 0 0;
			background: rgba(255, 255, 255, 1);
			display: flex;
			flex-direction: column;

			.cardTitle {
				// 提现金额  
				margin-top: 26rpx;
				font-size: 36rpx;
				font-weight: 500;
				letter-spacing: 0rpx;
				line-height: 52.12rpx;
				color: rgba(0, 0, 0, 1);
			}

			.Fee {
				display: flex;

				margin-top: 30rpx;

				.front {

					// ￥  
					font-size: 48rpx;
					font-weight: 700;
					letter-spacing: 0rpx;
					line-height: 69.5rpx;
					color: rgba(0, 0, 0, 1);
				}

				.fee {
					//   
					overflow: hidden;
					width: 214rpx;
					height: 88rpx;
					font-size: 60rpx;
					font-weight: 700;
					letter-spacing: 0rpx;
					line-height: 86.88rpx;
					color: rgba(0, 0, 0, 1);
					display: flex;
					justify-content: center;
					align-items: center;

					input {
						margin-left: 10rpx;
						height: 100%;
					}
				}
			}

			.Balance {
				margin-top: 30rpx;

				display: flex;
				align-items: center;
				font-size: 32rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 46.34rpx;
				color: rgba(0, 0, 0, 1);

				.descText {
					// 可提现佣金金额  
				}

				.balance {
					// ￥66000.00  
					margin-left: 15rpx;
				}
			}

			.verifyMsg {
				font-size: 32rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 46.34rpx;
				color: rgba(212, 48, 48, 1);
			}

			.promptInfo {
				margin-top: 50rpx;
				font-size: 24rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 34.76rpx;
				color: rgba(85, 85, 87, 1);

				.titleText {
					// 温馨提示  
				}

				.detail {
					// 1.提现手续费6%，具体金额以实际到账为准  
					// 2.提现金额不少于100元  
				}
			}

			.withdrawBtn {
				// 提现  
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				left: 264rpx;
				bottom: 260rpx;
				width: 224rpx;
				height: 132rpx;
				opacity: 1;
				border-radius: 16rpx;
				background: rgba(223, 161, 60, 1);
				font-size: 32rpx;
				font-weight: 500;
				letter-spacing: 0rpx;
				line-height: 46.34rpx;
				color: rgba(255, 255, 255, 1);
			}
		}



		//弹出的认证提示框
		.popCard {
			box-sizing: border-box;
			z-index: 99999999;
			position: absolute;
			left: 126rpx;
			top: 372rpx;
			width: 496rpx;
			height: 448rpx;
			opacity: 1;
			border-radius: 14rpx;
			background: rgba(255, 255, 255, 1);
			display: flex;
			align-items: center;
			flex-direction: column;

			.title {
				margin-top: 70rpx;
				font-size: 32rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 46.34rpx;
				color: rgba(30, 30, 32, 1);
			}

			.desc {
				margin-top: 30rpx;
				font-size: 28rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 40.54rpx;
				color: rgba(128, 128, 128, 1);
			}

			.toCertifyBtn {
				box-sizing: border-box;
				margin-top: 100rpx;
				width: 352rpx;
				height: 80rpx;
				opacity: 1;
				border-radius: 18rpx;
				background: rgba(223, 161, 60, 1);
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
			}

		}

	}
</style>